<template>
	<uni-popup ref="ads_pop">
		<view class="ads4s">
			<view class="title">
				零撸汽油
			</view>
			<view class="ads_content">
				<scroll-view scroll-y="true" @scrolltolower="scroll" class="buyChicken_block_centent">

					<template v-for="(item,index) in list">
						<view class="item" @click="toads(item)">
							<image class="img" src="/static/index/ad.png">
								<view class="middle">
									<text class="text1">{{item.name}}</text>
									<view class="text2">+{{item.num}}L</view>
								</view>
								<view class="ritht">
									<view class="text1" :class="item.is_finish?'action':''">{{item.is_finish?'已领取':'点击观看'}}</view>
								</view>
						</view>
					</template>
				</scroll-view>

			</view>
		</view>
		<view style="height: 20px;"></view>
		<view class="bottom">
			<image class="close" @click="close" src="/static/my/close2.png"></image>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			success: {
				type: Function,
			}
		},

		name: "ads",
		data() {
			return {
				current: 0,

				list: [],
				page: 1
			};
		},
		methods: {
			open() {
				this.list.length = 0
				this.page = 1
				this.getList()
				this.$refs.ads_pop.open()
			},
			close() {
				this.$refs.ads_pop.close()
			},
			toads(item) {
				uni.setStorageSync('adv_url',item.adv_url)
				this.success(item.id)
				this.custom.tool.jump(0,'index/webViews?second='+item.second)
				this.close()
			},
			getList() {
				var json = {
					page: this.page
				}
				this.api.http.requests('adv/lists', json, res => {
					if (res.data && res.data.length > 0) {
						this.list = this.list.concat(res.data)
					}
				}, "POST")
			},
			scroll() {
				this.page = this.page + 1
				this.getList()
			},
		}
	}
</script>

<style scoped lang="less">
	.ads4s {
		background: linear-gradient(295deg, #D2823A 0%, #EF9164 100%);
		border-radius: 10px;
		padding: 2px;
		text-align: center;
		width: 650rpx;

		.ads_content {
			background-color: #F9F3E5;
			border-radius: 10px;

			.item {
				display: flex;
				justify-content: space-between;
				padding: 10px;
				margin: 5px 10px;
				background: #FFFFFF;
				border-radius: 5px;

				.img {
					width: 50px;
					height: 50px;

				}

				.middle {
					flex: 1;
					font-size: 32rpx;
					font-weight: 800;
					color: #242424;
					

					.text2 {
						font-size: 28rpx;
						font-weight: 800;
						color: #FE903D;
					}
				}

				.ritht {
					.text1 {
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;
						padding: 5px 10px;
						background: #FE903D;
						border-radius: 18rpx;
					}

					.action {
						color: #FE903D;
						background: #F8ECE0;
					}

				}
			}
		}

		.title {
			text-align: center;
			font-size: 49rpx;
			font-weight: 800;
			color: #FFFFFF;
			padding: 5px;
		}

		.black_1 {
			width: 180px;
			height: 130px;
			margin: 25px 10px 0px 10px;
		}

		.buyChicken_block_centent {
			height: 300px;
		}


	}

	.bottom {
		text-align: center;
	}

	.close {
		text-align: center;
		margin: auto;
		width: 30px;
		height: 30px;
	}
</style>